<html>
  <head>
    <title>deck.gl ContourLayer Example</title>

    <script src="https://unpkg.com/deck.gl@^7.0.0/dist.min.js"></script>

    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js"></script>

    <style type="text/css">
      body {
        width: 100vw;
        height: 100vh;
        margin: 0;
      }
    </style>
  </head>

  <body></body>

  <script type="text/javascript">
    const {DeckGL, ContourLayer} = deck;

    new DeckGL({
      mapboxApiAccessToken: '<mapbox-access-token>',
      mapStyle: 'mapbox://styles/mapbox/dark-v9',
      longitude: -119.3,
      latitude: 35.6,
      zoom: 6,
      maxZoom: 20,
      layers: [
        new ContourLayer({
          id: 'contourLayer',
          data:
            'https://raw.githubusercontent.com/uber-common/deck.gl-data/master/examples/screen-grid/ca-transit-stops.json',
          getPosition: d => d,
          opacity: 1,
          contours: [
            {threshold: 1, color: [255, 0, 0], strokeWidth: 4},
            {threshold: 5, color: [0, 255, 0], strokeWidth: 2},
            {threshold: [6, 10], color: [0, 0, 255, 128]}
          ]
        })
      ]
    });
  </script>
</html>
